extends head

block content
  body#mimin.dashboard
    //- head
    nav.navbar.navbar-default.header.navbar-fixed-top
      div.col-md-12.nav-wrapper
        div.navbar-header(style="width:100%")
          div.opener-left-menu.is-open
            span.top
            span.middle
            span.bottom
          a.navbar-brand(href="index.html") <b>果然之味</b>
          ul.nav.navbar-nav.navbar-right.user-nav
            li.user-name
              span #{userName}
            li.dropdown.avatar-dropdown
              img.img-circle.avatar(src="/images/avatar.jpg" alt="user name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true")
              ul.dropdown-menu.user-dropdown
                li
                  a(href="#")
                    span.fa.fa-user &nbsp;设置
                li
                  a(href="#")
                    span.fa.fa-calendar &nbsp;日历
                li.divider(role="separator")
                li.more
                  ul
                    li
                      a(href="#")
                        span.fa.fa-cogs
                    li
                      a(href="#")
                        span.fa.fa-lock
                    li
                      a(href="/manager/user/logout")
                        span.fa.fa-power-off
              li
                a.opener-right-menu(href="#")
                  span.fa.fa-coffee
    //- head close

    div.container-fluid.mimin-wrapper
      //- left menu
      div#left-menu
        div.sub-left-menu.scroll
          ul.nav.nav-list
            li
              div.left-bg
            li.time
              h1.animated.fadeInLeft 10:00
              p.animated.fadeInRight Sat,October 1st 2029
            li.ripple(v-for="(menu,index) in menuList")
              a.tree-toggle.nav-header
                span
                | {{menu.parName}}
                span.fa-angle-right.fa.right-arrow.text-right
              ul.nav.nav-list.tree
                li(v-for="dtl in menu.details")
                  a(:href="dtl.url") {{dtl.menuName}}

      //- content
      div#content
          block body
block append footer
  script(type="text/javascript").
    $(function(){
      var menus = '#{menus}';

      if(menus == '' || menus == undefined){
          menus = '';
      }else {
          menus = JSON.parse(HtmlUtil.htmlDecodeByRegExp(menus));
      }
      var menu = new Vue({
          el:'#left-menu',
          data:{
              menuList:menus
          },
          methods:{
              init:function () {
                  datetime = $('.time h1');
                  datetime2 = $('.time p');
                  update();
                  setInterval(update, 1000);
                  leftMenu();
                  treeMenu();
                  hide();
              }
          }
      });

      // Variable
      $.fn.ripple = function () {
          $(this).click(function (e) {
              var rippler = $(this),
                  ink = rippler.find(".ink");

              if (rippler.find(".ink").length === 0) {
                  rippler.append("<span class='ink'></span>");
              }


              ink.removeClass("animate");
              if (!ink.height() && !ink.width()) {
                  var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
                  ink.css({
                      height: d,
                      width: d
                  });
              }

              var x = e.pageX - rippler.offset().left - ink.width() / 2;
              var y = e.pageY - rippler.offset().top - ink.height() / 2;
              ink.css({
                  top: y + 'px',
                  left: x + 'px'
              }).addClass("animate");

          });
      };

      $.fn.carouselAnimate = function () {
          function doAnimations(elems) {
              var animEndEv = 'webkitAnimationEnd animationend';

              elems.each(function () {
                  var $this = $(this),
                      $animationType = $this.data('animation');
                  $this.addClass($animationType).one(animEndEv, function () {
                      $this.removeClass($animationType);
                  });
              });
          }

          var $myCarousel = this;
          var $firstAnimatingElems = $myCarousel.find('.item:first')
              .find('[data-animation ^= "animated"]');

          doAnimations($firstAnimatingElems);
          $myCarousel.carousel('pause');
          $myCarousel.on('slide.bs.carousel', function (e) {
              var $animatingElems = $(e.relatedTarget)
                  .find("[data-animation ^= 'animated']");
              doAnimations($animatingElems);
          });
      };


      var hide = function () {
          $(".tree").hide();
      };


      var treeMenu = function () {
          $('.tree-toggle').click(function (e) {
              e.preventDefault();
              var $this = $(this).parent().children('ul.tree');
              $(".tree").not($this).slideUp(600);
              $this.toggle(700);

              $(".tree").not($this).parent("li").find(".tree-toggle .right-arrow").removeClass("fa-angle-down").addClass("fa-angle-right");
              $this.parent("li").find(".tree-toggle .right-arrow").toggleClass("fa-angle-right fa-angle-down");

              setTimeout(function () {
                  $('#left-menu .sub-left-menu').niceScroll().resize();
              },1000)

          });
      };


      var leftMenu = function () {

          $('.opener-left-menu').on('click', function () {
              $(".line-chart").width("100%");
              $(".mejs-video").height("auto").width("100%");
              if ($('#right-menu').is(":visible")) {
                  $('#right-menu').animate({'width': '0px'}, 'slow', function () {
                      $('#right-menu').hide();
                  });
              }
              if ($('#left-menu .sub-left-menu').is(':visible')) {
                  $('#content').animate({'padding-left': '0px'}, 'slow');
                  $('#left-menu .sub-left-menu').animate({'width': '0px'}, 'slow', function () {
                      $('.opener-left-menu').removeClass('is-open');
                      $('.opener-left-menu').addClass('is-closed');
                      $('#left-menu .sub-left-menu').hide();
                  });

              }
              else {
                  $('#left-menu .sub-left-menu').show();
                  $('#left-menu .sub-left-menu').animate({'width': '230px'}, 'slow');
                  $('#content').animate({'padding-left': '230px', 'padding-right': '0px'}, 'slow');
                  $('.opener-left-menu').removeClass('is-closed');
                  $('.opener-left-menu').addClass('is-open');
              }
          });
      };


      var datetime = null,
          date = null;

      var update = function () {
          date = moment(new Date())
          datetime.html(date.format('HH:mm'));
          datetime2.html(date.format('dddd, MMMM Do YYYY'));
      };


        $("#left-menu ul li a").ripple();
        $(".ripple div").ripple();
        $("#carousel-example3").carouselAnimate();

        $("#left-menu .sub-left-menu").niceScroll({
            touchbehavior: false,
            cursorcolor: "#2196f3",
            cursoropacitymax: 1,
            cursorwidth: 5,
            cursorborder: "none",
            cursorborderradius: "4px",
            background: "#2196f3",
            autohidemode: true,
            scrollspeed: 60, // 滚动速度
            mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素)
            hwacceleration: true
        });

      $("body").tooltip({selector: '[data-toggle=tooltip]'});
        menu.init();
    });